<template>
    <div>
      <h2>登录</h2>
        <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="username"
    label="用户名"
    placeholder="用户名"
    :rules="rules.username"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    label="密码"
    placeholder="密码"
    :rules="rules.password"
  />
  <!-- 验证码 -->
    &emsp;验证码&emsp;&emsp;&emsp;<input v-model="inputVal" placeholder="请输入验证码" style="width:150px" clearable :rules="rules.inputVal" />
    <validate-code ref="ref_validateCode" @change="changeCode" />
    <!-- <button @click="compare()">比对</button> -->
    <br>
    <!-- <p class="A">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;{{result}}</p> -->

  <div style="margin: 16px;">
    <van-button round block type="info"  native-type="submit" @click="compare()">提交</van-button>
  </div>



</van-form>
  还没有账号，请 <router-link to="/my/register">注册</router-link>
    </div>
</template>

<script>
import Vue from 'vue';
import { Form } from 'vant';
import { Field } from 'vant';
import {login} from '@/request'
import { Toast } from 'vant';
import {setcookie} from '@/utils/cookie'
//验证码
import validateCode from "@/components/ValidateCode.vue";




Vue.use(Toast);
Vue.use(Form);
Vue.use(Field);

export default {
    components:{
      // 验证码
      validateCode
    },
    data () {
      return {

      // 验证码
      inputVal:"",
      checkCode:"",
      result:"",
      
      


      rules: {
        username: [
          {
            required: true,
            message: '请填写用户名' ,
            trigger: 'onChange'
          }
        ],
        password: [
          {
            required: true,
            message: '请填写密码' ,
            trigger: 'onChange'
          }
        ],
        inputVal:[
          {
            required:true,
            message:'请填写认证码',
            trigger:'onChange'
          }
        ]
      },
        username: '',
        password: '',
      }
      },

      // 验证码
      props: {},
      created() {},
      mounted() {},
      computed: {},

      methods: {
        //验证码
        
    changeCode(value) {
      this.checkCode = value;
    },
    compare() {
      if (this.inputVal.toUpperCase() === this.checkCode) {
          //就这个判断的拿过去
        // this.result = "验证码正确";
        
      } else {
        
        this.result = "验证码错误,请重新输入";
        this.inputVal = "";
        this.$refs["ref_validateCode"].draw();
      }
    },


     onSubmit(values) {
          var _this=this
          console.log('submit', values);
        login(values,this.inputVal.toUpperCase(),this.checkCode).then(data => {
          console.log(data);
          var {code, msg} = data
            if(code === 1) {
          // 成功
        Toast.success({
          message: msg,
          onClose() {
          // 跳转
          setcookie('username',values.username,7200)
          setcookie('nickname',data.data.nickname,7200)
          var url = localStorage.getItem('url')
          if(url){
            localStorage.removeItem('url')
            _this.$router.push(url)

          }else{
            _this.$router.push('/my')
          }}})
          
      } else {
      // 失败
        // console.log('失败');
        Toast.fail(msg)
      }
          
          
        })
        }

      },
     
      }
</script>

<style>
    input{
      height: 30px;
      /* border: 1px solid red; */
      border:none
    } 
    .A{
      color: red;
    }
</style>
